<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tooltip</title>
    <style>
        p{
            width:150px;
            height:50px;
            background-color: blue;
        }
        span{
            position: absolute;
            height:20px;
            font-size:10px;
            background-color: wheat;
            display:none;
        }
        span:before{
            content: '';
            border-bottom:5px solid wheat;
            border-left:5px solid transparent;
            border-right:5px solid transparent;
            border-top:5px solid transparent;
            position:absolute;
            left:30%;
            top:-50%;
        }
    </style>
</head>
<body>
<div>
    <p>hello world!</p>
    <span>我是tips</span>
</div>
<script>
    var oP=document.querySelector("p");
    var oSpan=document.querySelector("span");
    oP.onmouseover=function(){
        oSpan.style.display="block";
    }
    oP.onmouseout=function(){
        oSpan.style.display="none";
    }
</script>
</body>
</html>